<%--
  Created by IntelliJ IDEA.
  User: Tian
  Date: 2024/3/14
  Time: 20:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/echarts.js"></script>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <div id="main" style="width: 600px;height:400px;">

    </div>
</div>

</body>
<script>
    let app=new Vue({
        el:"#app",
        created(){
            this.initEcharts();
        },
        data:{
            emp:[],
            count:[],
        },
        methods:{
            initEcharts(){
                axios.get("/echart/demo01").then(result=>{
                    console.log(result)
                    for (let i = 0; i <result.data.length ; i++) {
                        this.emp.push(result.data[i].dname)
                        this.count.push(result.data[i].count)
                    }


                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption( {
                        title: [
                            {
                                text: '部门信息'
                            }
                        ],
                        polar: {
                            radius: [30, '80%']
                        },
                        radiusAxis: {
                            max: 4
                        },
                        angleAxis: {
                            type: 'category',
                            data: this.emp,
                            startAngle: 75
                        },
                        tooltip: {},
                        series: {
                            type: 'bar',
                            data: this.count,
                            coordinateSystem: 'polar',
                            label: {
                                show: true,
                                position: 'middle',
                                formatter: '{b}: {c}'
                            }
                        },
                        animation: false
                    })
                })
            }
        }
    })
</script>
</html>